<template>
  <!--    spu参数配置-规格项值信息（元属性）-->
  <div class="spu-spec-item-node">
    <Button
      v-if="!ifChildNode"
      style="margin-right: 15px"
      :type="'primary'"
      @click="handleAdd"
      @mouseenter="handleSortableDisabled(true)"
      @mouseleave="handleSortableDisabled(false)"
      >添加元属性</Button
    >
    <template v-for="(item, index) in optValueList" :key="item.bizMetaAttrId">
      <div class="opt-value">
        <Input
          v-model:value="item.displayName"
          @mouseenter="handleSortableDisabled(true)"
          @mouseleave="handleSortableDisabled(false)"
        />
        <Icon
          size="18"
          class="del-icon"
          icon="clarity:remove-solid"
          @click="handleDel(index)"
          @mouseenter="handleSortableDisabled(true)"
          @mouseleave="handleSortableDisabled(false)"
        />
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
  import Icon from '@/components/Icon/Icon.vue';
  import { Input, Button } from 'ant-design-vue';
  import { SpuOptValueModel } from 'mc-c2b2m-operator-api/types/spu';
  import { inject } from 'vue';

  defineProps({
    // 是否为子规格节点
    ifChildNode: {
      type: Boolean,
      default: false,
    },
    // 数据源列表
    optValueList: {
      type: Array as PropType<Array<SpuOptValueModel>>,
      default: () => {
        return [];
      },
    },
  });

  const handleSortableDisabled: any = inject('handleSortableDisabled');

  const emits = defineEmits(['delOptValue', 'addOptValue']);
  function handleAdd() {
    emits('addOptValue');
  }
  function handleDel(index: number) {
    emits('delOptValue', index);
  }
</script>

<style scoped lang="less">
  .spu-spec-item-node {
    display: flex;
    .opt-value {
      position: relative;
      margin-right: 10px;
      .del-icon {
        top: -9px;
        right: -9px;
        cursor: pointer;
        position: absolute;
      }
    }
  }
</style>
